<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<svg>
			<!-- Stroke属性定义一条线，文本或元素轮廓颜色： -->
			<g fill="none">
				<path stroke="red" d="M5 20 l215 0" />
				<path stroke="blue" d="M5 40 l215 0" />
				<path stroke="black" d="M5 60 l215 0" />
			</g>
		</svg>

		<svg>
			<!-- stroke-width属性定义了一条线，文本或元素轮廓厚度： -->
			<g fill="none" stroke="black">
				<path stroke-width="2" d="M5 20 l215 0" />
				<path stroke-width="4" d="M5 40 l215 0" />
				<path stroke-width="6" d="M5 60 l215 0" />
			</g>
		</svg>

		<svg>
			<!-- stroke-linecap属性定义不同类型的开放路径的终结： -->
			<g fill="none" stroke="black" stroke-width="6">
				<path stroke-linecap="butt" d="M5 20 l215 0" />
				<path stroke-linecap="round" d="M5 40 l215 0" />
				<path stroke-linecap="square" d="M5 60 l215 0" />
			</g>
		</svg>

		<svg>
			<!-- stroke-dasharray属性用于创建虚线： -->
			<g fill="none" stroke="black" stroke-width="4">
				<path stroke-dasharray="5,5" d="M5 20 l215 0" />
				<path stroke-dasharray="10,10" d="M5 40 l215 0" />
				<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
			</g>
		</svg>
		<style>
			svg {
				/* 默认 宽300 高150 */
				border: 1px solid red;
			}
		</style>
	</body>
</html>
